.wrap{
    background-color: $color-white;
}
.banner {
    height: 90px;
    overflow: hidden;
    background: url('../../assets/images/space.png');
    background-size: cover;
    background-position: 50%;
}
.head {
    display: flex;
    justify-content: space-between;
    padding: {
        left: 10px;
        right: 10px;
    }
    :global(.face) {
        margin-top: -6px;
    }
    &-content {
        flex: 1;
        margin: {
          top: 8px;
          left: 50px;
        }
    }
}

.grid {
    display: flex;
    :global(.col) {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &::after{
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -8px;
            display: block;
            width: 1px;
            height: 16px;
            background-color: #e7e7e7;
        }
        &:last-child {
            &::after{
                display: none;
            }
        }
    }
    :global(.num) {
        font-size: 14px;
        color: $color-text-primary;
    }
    :global(.unit){
        font-size: 12px;
        color: $color-text-secondary;
    }
}

.focus-btn{
    margin-top: 10px;
    font-size: 14px;
}

.content{
    padding: 12px 10px;
    :global(.name) {
        font-size: 18px;
        max-width: 235px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
    }
    :global(.sex) {
        margin-right: 5px;
        &:global(.fa-male) {
          color: #409EFF;
        }
        &:global(.fa-female){
          color: $theme-color;
        }
    }

    :global(.level){
        vertical-align: middle;
        &:global(0),&:global(1){
          color: #bfbfbf;
        }
        &:global(2){
          color: #95ddb2;
        }
        &:global(3){
          color: #92d175;
        }
        &:global(4){
          color: #ff837c;
        }
        &:global(5){
          color: #ff6c00;
        }
        &:global(6){
          color: #f00;
        }
        :global(.fa) {
          font-size: 30px;
        }
    }

    :global(.vip){
        transform: scale(.8);
        background-color: $theme-color;
        color: $color-white;
    }
    &-body{
        display: flex;
        :global(.offical) {
            width: 18px;
            height: 18px;
            margin-right: 5px;
        }
        :global(.sign),:global(.desc){
            flex: 1;
            height: 16px;
            font-size: 13px;
            color: $color-text-regular;
            @include max-lines(1);
            line-height: normal;
            &:global(-open){
              display: block;
              height: auto;
              white-space: normal;
            }
        }
        :global(.desc){
            color: $color-text-secondary;
        }
        :global(.btn){
            line-height: normal;
            font-size: 13px;
            color: #1389bf;
        }
    }
    &-foot {
        :global(.desc){
          margin-top: 8px;
          font-size: 13px;
          color: $color-text-secondary;
        }
        :global(.badge){
          vertical-align: middle;
          font-size: 12px;
          color: $color-text-regular;
          background-color: $color-grey;
          transform: scale(.8);
        }
    }
}